<template>
  <div class="login-mask">
    <div class="login-box">
      <div class="mode-switch">
        <a-button
          :type="!isRegistering ? 'primary' : 'default'"
          @click="isRegistering = false"
        >登录
        </a-button>
        <a-button
          :type="isRegistering ? 'primary' : 'default'"
          @click="isRegistering = true"
        >注册
        </a-button>
      </div>
      <h2>{{ isRegistering ? '用户注册' : '用户登录' }}</h2>

      <a-input
        v-model:value="loginForm.account"
        placeholder="账号"
        class="login-input"
      />

      <!-- 新增邮箱输入框 -->
      <a-input
        v-if="isRegistering"
        v-model:value="loginForm.email"
        placeholder="电子邮箱"
        class="login-input"
      />

      <!-- 新增验证码输入框和发送按钮 -->
      <div v-if="isRegistering" class="code-input-group">
        <a-input
          v-model:value="loginForm.verificationCode"
          placeholder="验证码"
          class="login-input code-input"
        />
        <a-button
          v-prevent-reclick
          :disabled="countdown > 0"
          @click="handleSendCode"
          class="send-btn"
        >
          {{ countdown > 0 ? `${countdown}s后重发` : '发送验证码' }}
        </a-button>
      </div>
      <a-input-password
        v-model:value="loginForm.password"
        placeholder="密码"
        class="login-input"
        @keyup.enter="handleSubmit"
      />
      <!-- 新增确认密码输入框 -->
      <a-input-password
        v-if="isRegistering"
        v-model:value="loginForm.confirmPassword"
        placeholder="确认密码"
        class="login-input"
        @keyup.enter="handleSubmit"
      />
      <div style="display:flex;gap: 10px">
        <!-- 新增试用按钮 -->
        <a-button
          v-if="!isRegistering"
          v-prevent-reclick
          block
          class="trial-btn"
          @click="handleTrial"
          :loading="loggingIn"
        >
          试用
        </a-button>
        <a-button
          v-prevent-reclick
          type="primary"
          block
          class="login-btn"
          @click="handleSubmit"
          :loading="loggingIn"
        >
          {{ isRegistering ? '注册' : '登录' }}
        </a-button>
      </div>
    </div>
  </div>
</template>

<script>
import { message } from 'ant-design-vue'
import request from '@/util/request.js'

export default {
  name: 'Login',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loggingIn: false,
      isRegistering: false, // 新增注册模式状态
      loginForm: {
        account: '',
        password: '',
        confirmPassword: '',
        email: '', // 新增邮箱字段
        verificationCode: '' // 新增验证码字段
      },
      countdown: 0 // 新增验证码倒计时
    }
  },
  methods: {
    async handleSendCode() {
      // 邮箱格式验证
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      if (!emailRegex.test(this.loginForm.email)) {
        message.error('请输入有效的邮箱地址')
        return
      }

      try {
        // 调用发送验证码接口
        await request.get('/user/sendEmail?email='+this.loginForm.email)
        message.success('验证码已发送')
        this.startCountdown()
      } catch (error) {
        message.error(error.response?.data?.message || '发送失败')
      }
    },

    startCountdown() {
      this.countdown = 60
      const timer = setInterval(() => {
        if (this.countdown <= 0) {
          clearInterval(timer)
          return
        }
        this.countdown--
      }, 1000)
    },

    async handleSubmit() {
      // 添加注册表单验证
      if (this.isRegistering && this.loginForm.password !== this.loginForm.confirmPassword) {
        message.error('两次输入的密码不一致')
        return
      }
      // 修改为统一提交方法
      if (!this.loginForm.account || !this.loginForm.password) {
        message.error(`请输入用户名${this.isRegistering ? '密码、邮箱、验证码' : '和密码'}`)
        return
      }
      try {
        const endpoint = this.isRegistering ? '/user/register' : '/user/login'
        const response = await request.post(endpoint, this.loginForm)

        if (response.data.code === 200) {
          if (this.isRegistering) {
            message.success('注册成功，自动登录')
          }
          this.$store.commit('updateUser', response.data.data)
          this.$router.push((this.$route.query?.redirect) ?? '/list')
        }else {
          message.error(response.data.msg)
        }
      } catch (error) {
        message.error(error.response?.data?.msg || '登录失败')
      } finally {
      }
    },
    handleTrial(){
      this.$router.push("/chat")
    }
  }
}
</script>

<style scoped>
/* 新增模式切换样式 */
.mode-switch {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.mode-switch button {
  flex: 1;
  border-radius: 8px;
  height: 36px;
}

.login-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.login-box {
  background: white;
  padding: 30px 40px;
  border-radius: 12px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.login-input {
  margin-bottom: 20px;
  border-radius: 8px;
  height: 40px;
}

.login-btn {
  height: 40px;
  border-radius: 8px;
  font-weight: 500;
}

h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #1890ff;
}

@media (max-width: 768px) {
  .login-box {
    padding: 20px;
    margin: 10px;
  }
}

/* 新增验证码输入组样式 */
.code-input-group {
  display: flex;
  gap: 10px;
}

.code-input {
  flex: 1;
}

.send-btn {
  width: 120px;
  border-radius: 8px;
  height: 40px;
}

/* 新增试用按钮样式 */
.trial-btn {
  height: 40px;
  border-radius: 8px;
  font-weight: 500;
  background: #52c41a;
  color: white;
  border-color: #52c41a;
}

.trial-btn:hover {
  background: #73d13d;
  color: white;
  border-color: #73d13d;
}
</style>